{% extends "templates/panoptic_base.html" %}

{% block title %}Panoptic - Report an FRT System{% endblock %}

{% block meta_block %}
{% include "templates/includes/meta_block.html" %}
{% endblock %}

{% block content %}
<section class="container border-b border-collapse">
	{{ web_block(
		"Title Section",
		values={
			"title": title,
		},
		add_container=0,
		add_top_padding=0,
		add_bottom_padding=0,
	) }}
	<div class="border-r border-l flex flex-wrap">
		{% if submitted %}
		<div class="max-w-lg mx-auto p-5 md:p-8 lg:p-12">
			<h3>
				Thank you for sending us this report.
			</h3>
			<p class="mt-3">
				Panoptic is an initiative by the Internet Freedom Foundation.
				You can help us scale up initiatives like these by making a donation for digital rights.
			</p>
			<p class="mt-3">
				Become an IFF member to help sustain the fight for internet freedom.
				We ask for your support to our corpus to fight in courts, legislative bodies and regulators for ordinary
				Indian internet users like you.
			</p>
			<a class="mt-6 inline-block text-center px-5 py-3 rounded-sm bg-orange-500" target="_blank"
				rel="noopener noreferrer" href="https://internetfreedom.in/donate">Donate
				Now</a>
		</div>
		{% else %}
		<div class="prose prose-md w-full md:w-1/2 border-r p-5 md:p-8 lg:p-12">
			{{ frappe.utils.md_to_html(settings.report_an_frt_intro) }}
		</div>
		<div class="p-5 md:p-8 lg:p-12 w-full md:w-1/2 mb-5 md:mb-0">
			<form name="report-frt-form" class="max-w-lg mx-auto" method="POST">
				<label class="block">
					<span class="text-white">Name</span>
					<input name="full_name"
						class="form-input bg-teal-blue-700 border-none text-teal-blue-200 mt-1 block w-full" required
						placeholder="Neo Anderson">
				</label>

				<label class="block mt-6">
					<span class="text-white">Your Email Address</span>
					<input name="email"
						class="form-input bg-teal-blue-700 border-none text-teal-blue-200 mt-1 block w-full" required
						placeholder="neo@matrix.com">
				</label>

				<label class="block mt-6">
					<span class="text-white">Location of the FRT System</span>
					<p class="text-teal-blue-300">Please add city, state, district and any other information possible.
					</p class="text-teal-blue-300">
					<input name="location"
						class="form-input bg-teal-blue-700 border-none text-teal-blue-200 mt-1 block w-full" required
						placeholder="Zion">
				</label>

				<label class="block mt-6">
					<span class="text-white">Authority using the Facial Recognition system.</span>
					<input name="authority" type="text"
						class="form-input bg-teal-blue-700 border-none text-teal-blue-200 mt-1 block w-full" required
						placeholder="The Matrix"></input>
				</label>

				<label class="block mt-6">
					<span class="text-white">More about the FRT System</span>
					<p class="text-teal-blue-300">Please provide media links (including news articles, video coverage
						etc.)
						or documents which mention the FRT System *</p>
					<textarea name="description" type="text" rows="8"
						class="form-textarea bg-teal-blue-700 border-none text-teal-blue-200 mt-1 block w-full" required
						placeholder="Describe the FRT System"></textarea>
				</label>

				<label class="mt-6 hidden">
					<span class="text-white">Designation</span>
					<input id="csrf_input_data" name="csrf_token" class="form-input" value="">
				</label>

				<div class="flex mt-6">
					<label class="flex items-center">
						<input name="agree_terms" type="checkbox" class="form-checkbox" required>
						<span class="ml-2">I agree to the <a href="/privacy-policy" class="underline">privacy
								policy</a></span>
					</label>
				</div>
				<div class="flex mt-6">
					<button class="px-5 py-3 rounded-sm bg-orange-500 w-full" type="button"
						onclick="submitForm()">Submit
						Report</button>
				</div>
			</form>
		</div>
		{% endif %}
	</div>
</section>
{% endblock %}

{% if not submitted %}
{% block script %}
<script>
	document.addEventListener('DOMContentLoaded', () => {
		document.getElementById("csrf_input_data").value = frappe.csrf_token;
	})

	function submitForm() {
		let frm = document.getElementsByName('report-frt-form')[0];
		if (frm.checkValidity()) {
			frm.submit(); // Submit the form
			frm.reset();  // Reset all form data
			return false; // Prevent page refresh
		} else {
			frm.reportValidity()
		}
	}
</script>
{% endblock %}
{% endif %}